<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="疾病" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model="diseaseId" placeholder="请选择疾病" style="width: 80%" @change="updateDiseaseId" show-search
                    option-filter-prop="children" :filter-option="filterOption">
            <a-select-option v-for="d in diseaseList" :key="d.id" :value="d.id">{{ d.diseaseName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="症状" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="['symptomId',{rules: [{ required: true, message: '请选择!', }]}]"
                    placeholder="请选择疾病症状" @change="updateSymptomId">
            <a-select-option v-for="d in symptomsList" :key="d.id" :value="d.id">{{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="问题描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <template v-for="(item , index) in problemDescriptionList">
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption1"
              mode="multiple"
              v-model="item.peopleTypeList"
              style="width: 100%"
              placeholder="人物类型"
              @change="updatePeopleType(index, item.peopleTypeList)">
              <a-select-option value="1">男-成人</a-select-option>
              <a-select-option value="2">男-儿童</a-select-option>
              <a-select-option value="3">女-成人</a-select-option>
              <a-select-option value="4">女-儿童</a-select-option>
            </a-select>
            <a-textarea v-model="item.problemDescription" placeholder="请输入问题描述" style="width: 100%"/>
            <!--<a-radio-group text="上传类型" v-decorator="['uploadType']">-->
              <!--<a-radio :value="0">-->
                <!--图片-->
              <!--</a-radio>-->
              <!--<a-radio :value="1">-->
                <!--视频-->
              <!--</a-radio>-->
            <!--</a-radio-group>-->


            <a-select
              v-model="item.uploadType"
              style="width: 100%"
              placeholder="上传类型">
              <a-select-option value="0">图片</a-select-option>
              <a-select-option value="1">视频</a-select-option>
            </a-select>
            <j-upload text="问题图片"
                      :number="5"
                      v-model="item.imageUrl"
                      fileType="image" v-if="item.uploadType == 0"></j-upload>
            <j-upload text="问题视频"
                      :number="1"
                      v-model="item.videoUrl"
                      fileType="file" v-if="item.uploadType == 1"></j-upload>
            <a-button type="primary" @click="deleteList(index)" v-show="problemDescriptionList.length > 1">
              删除
            </a-button>
          </template>
          <a-divider type="vertical"/>
          <a-button type="primary" @click="addList">
            添加
          </a-button>
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

  import {getAction, httpAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import {validateDuplicateValue} from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import ATextarea from "ant-design-vue/es/input/TextArea";
  import JUpload from '@/components/jeecg/JUpload'


  export default {
    name: "MedicalDiseaseProblemAddModal",
    components: {
      ATextarea,
      JUpload,
      JDate,
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: "操作",
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {},
        url: {
          add: "/medical/medicalDiseaseProblem/addList",
          edit: "/medical/medicalDiseaseProblem/edit",
          getListByDepartmentId: "/hospital/medicalDetailsDiseaseInfo/getListInfo",
          getDiseaseSymptoms: "/hospital/medicalDetailsDiseaseInfo/getDiseaseSymptoms",
        },
        diseaseList: [],
        symptomsList: [],
        problemDescriptionList: [],
        diseaseId: '',
        symptomId: '',
      }
    },
    created() {
      this.initIndex();
    },
    methods: {
      add() {
        this.edit({});
      },
      edit(record) {
        this.diseaseId = '';
        this.symptomId = '';
        this.problemDescriptionList = [];
        this.initIndex();
        let obj = {
          diseaseId: this.diseaseId,
          symptomId: this.symptomId,
          problemDescription: null,
          problemStatus: 1,
          uploadType: '0',
          peopleTypeList: [],
        };
        this.problemDescriptionList.push(obj);
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'diseaseId', 'symptomId', 'problemDescription', 'problemSort', 'problemStatus', 'delFlag', 'createTime', 'createBy', 'updateTime', 'updateBy'))
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (this.diseaseId == null || this.diseaseId == '') {
            this.$message.warning("请先选择疾病");
            return;
          }
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let i = 0;
            this.problemDescriptionList.forEach(item => {
              if (i == 0) {
                //第一个问题默认为初始问题
                item.problemStatus = 1;
              }
              //设置排序
              item.problemSort = i;
              i++;
            });
            let formData = this.problemDescriptionList;
            console.log("表单提交数据", formData);
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }

        })
      },
      handleCancel() {
        this.close()
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'diseaseId', 'symptomId', 'problemDescription', 'problemSort', 'problemStatus', 'delFlag', 'createTime', 'createBy', 'updateTime', 'updateBy'))
      },
      initIndex() {
        //疾病
        getAction(this.url.getListByDepartmentId).then((res) => {
          if (res.success) {
            this.diseaseList = res.result;
          }
        });
      },
      addList() {
        if (this.diseaseId == null || this.diseaseId == '') {
          this.$message.warning("请先选择疾病");
          return;
        }
        let bo = true;
        let obj = {
          diseaseId: this.diseaseId,
          symptomId: this.symptomId,
          problemDescription: null,
          problemStatus: 0,
          peopleTypeList: [],
        };
        if (this.problemDescriptionList.length > 0) {
          this.problemDescriptionList.forEach(item => {
            if (item.problemDescription == null || item.problemDescription == '') {
              //弹窗提醒
              this.$message.warning("问题描述不能为空");
              bo = false;
            }
          })
        }
        if (bo) {
          this.problemDescriptionList.push(obj);
          console.info(this.problemDescriptionList);
        }
      },
      updateDiseaseId(value) {
        this.problemDescriptionList.forEach(item => {
          item.diseaseId = value;
        });
        let param = {diseaseId: value};
        getAction(this.url.getDiseaseSymptoms, param).then((res) => {
          if (res.success) {
            this.symptomsList = res.result;
          }
        });
      },
      updateSymptomId(value) {
        this.symptomId = value;
        this.problemDescriptionList.forEach(item => {
          item.symptomId = value;
        })
      },
      deleteList(index) {
        this.problemDescriptionList.splice(index, 1)
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOption1(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      updatePeopleType(index, value) {
        let ids = "";
        value.forEach(a => {
          ids = ids + a + ",";
        })
        this.problemDescriptionList[index].peopleTypes = ids;
      },
    }
  }
</script>